1

Необходимо в текстовый элемент вставлять новое значение. Значение может быть от 0.0 до 100.0. т.е. максимальное количество символов в строке может быть 5. Есть код, который добавляет нужное количество пробелов справа и слева, если длина текста меньше 5.

Проблема в том, что если в строке имеются подстроки из пробелов (> 1), то они заменяются на один пробел. Нашел решение: заменить пробелы на символ '\u00A0'. Это работает для строк вида 1.0 и 22.4, но если в строке будут все 5 знаков, т.е. это строка 100.0, текст смещается.

Разное поведение можно увидеть, если изменять в моем коде значение переменной new_value.

Как сделать, чтобы текст всегда имел один формат: Ia: n-пробелов, если нужно значение m-пробелов, если нужно A.

new_value = '5.0';  // обязательно один символ после точки
let max_length = 5;

const len = new_value.length;
new_value = new_value.padStart(len + Math.floor((max_length - len) / 2), ' ');
new_value = new_value.padEnd(max_length, ' ');

new_value = `Ia: ${new_value} A`;

new_value = new_value.replace(' ', '\u00A0');

text = document.querySelector('text');
text.innerHTML = new_value;
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="100%" height="100%" viewBox="0 0 128 128">
  <rect width="384" height="384" fill="#FFFFFF" stroke="none" id="background"/>
  <g id="root" transform="translate(0,0)">
    <g transform="translate(64,20)">
      <rect x="-56.5" y="-8.5" width="113" height="17" fill="#FFFF00" stroke="#000000" stroke-width="1.0" opacity="1.0"/>
      <text transform="translate(0,4.861111111111111)" fill="#000000" font-family="Consolas" font-size="14pt" text-anchor="middle">Ia: 0.0 &#1040;</text>
    </g>
  </g>
</svg>

5
  • а зачем пробелы? 13 авг 2020 в 12:16
  • Чтобы преамбула (Ia:) и завершение (А) всегда были по краям, а текст ровно по центру (ну ровно будет не всегда, т.к. сначала пробел добавляется cправа, потом слева, аналог python str.center()). Т.к. шрифт моноширинный, решил выравнивать пробелами.
    – ioprst
    13 авг 2020 в 12:16
  • поапробуйте text-anchor=“middle” 13 авг 2020 в 12:18
  • Нет, он выравнивает весь текст. Тогда Ia: 5.0 A и Ia: 15.0 A будут различаться по оформлению в том смысле, что расстояние Ia: и A от границы будет разное. Я решил это обойти так: к строке Ia: 5.0 A добавить после 5.0 пробел, получить Ia: 5.0 A, тогда для моноширинного текста общий размер текста сохраняется. В общем суть в том, что мне нужно всегда иметь фиксированное количество символов в строке.
    – ioprst
    13 авг 2020 в 12:21
  • может это 3 разных текста 14 авг 2020 в 1:41

1 ответ 1

0

Так как метод str.replace заменяет только первое вхождение подстроки (в моем случае), возникала проблема, которая описана в вопросе. Замена всех вхождений _ (space) на \u00A0 решает проблему.

Необходимо изменить код

new_value = new_value.replace(' ', '\u00A0');

на

new_value = new_value.replace(/ /g, '\u00A0');

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.