Javascript .index из соответствующих символов HTML

Question

Я решил проблему очень неряшливо, в поисках лучшего решения.

Задача

Проверьте, содержит ли промежуток HTML-символ (стрелка)если присутствует, замените символ на противоположный.

Первая попытка (без отображения второго фрагмента кода, который выполняет обратное действие)

 first=headers[0].querySelector('span')
 if (first.innerHTML.indexOf('↘') !== -1)
                            first.innerHTML=first.innerHTML.substring(0, first.innerHTML.length - 13)
 first.innerHTML+=' ↖'

Почемуразве это не работает?

потому что пока   ===   но по какой-то причине ↘ === ↘

Серьезно! Попробуйте это (проверено в IE 11 и Chrome)

<span>test</span>
<script>
    first=document.querySelector('span')
    first.innerHTML+='&nbsp&searr;'
    console.log(first.innerHTML)
</script>

В консоли вы получите: test ↘

Моё безобразное решение

Iскопировал стрелку в мой код JS

if (first.innerHTML.indexOf('↘') !== -1)
                            first.innerHTML=first.innerHTML.substring(0, first.innerHTML.length - 7)
                    first.innerHTML+=' ↖'

Итак ... как правильно решить эту проблему?

Answer 1

Если вы беспокоитесь о том, чтобы в коде была эта буквальная стрелка, вам не следует. Если ваш набор инструментов правильно сконфигурирован, это просто нормально иметь эту буквальную стрелку в вашем коде.

Но если вы хотите избежать этого, вы можете использовать вместо него escape-кодировку Unicode:

const nwarr = "\u2196";
if (first.innerHTML.indexOf(nwarr) !== -1) {
    first.innerHTML = first.innerHTML.substring(0, first.innerHTML.length - 7);
}
first.innerHTML += '&nbsp;&nwarr;'; // <== Did you mean &searr; here? The opposite of nwarr?

Пример в реальном времени (с использованием ↘ в замене:

const first = document.getElementById("first");

setTimeout(() => {
    const nwarr = "\u2196";
    if (first.innerHTML.indexOf(nwarr) !== -1) {
        first.innerHTML = first.innerHTML.substring(0, first.innerHTML.length - 7);
    }
    first.innerHTML += ' ↘';
}, 800);

<span id="first">Foo&nbsp;&nwarr;</span>

---

Два примечания:

1. Чтобы заменить вещи, я бы использовал replace вместо substring и +=, не в последнюю очередь, чтобы у вас не было магических чисел (13, 7) в вашем коде:

first.innerHTML = first.innerHTML.replace(/\ \u2196/g, " ↘");

youможет даже позволить некоторым браузерам использовать для этого символьную сущность, а не символ:

first.innerHTML = first.innerHTML.replace(/\ (?:\↖|\u2196)/g, " ↘");

Пример в реальном времени (с использованием ↘ в качестве замены:

const first = document.getElementById("first");

setTimeout(() => {
    first.innerHTML = first.innerHTML.replace(/\ (?:\↖|\u2196)/g, " ↘");
}, 800);

<span id="first">Foo&nbsp;&nwarr;</span>

2. Я бы избегал текстовых манипуляций с innerHTML. Если вы присваиваете ему, даже когда присваиваете то, что у него уже было, оно разрушает все элементы (и другие узлы) внутри элемента, с которым вы это делаете, и создает новые заменяющие элементы и узлы.

Например, вы можете прокрутить текстовые узлы:

const first = document.getElementById("first");

setTimeout(() => {
    handleReplacement(first);
}, 800);

function handleReplacement(el) {
    for (let child = el.firstChild; child; child = child.nextSibling) {
        if (child.nodeType === 1) { // Element
            handleReplacement(child);
        } else if (child.nodeType === 3) { // Text
            child.nodeValue = child.nodeValue.replace(/\u00A0\u2196/g, "\u00A0\u2198");
        }
    }
}

<span id="first">Foo&nbsp;&nwarr;</span>

Answer 2

Основано на очень хороших идеях TJ Crowder. Я пропатчил свой тестовый код в это:

<span>test&nbsp;&nwarr;</span>
<script>
const nw="\u2196";
const se="\u2198";
first=document.querySelector('span')
if (first.innerHTML.indexOf(nw) !== -1)
   {
    console.log("found arrow");
    first.innerHTML = first.innerHTML.replace(/\u2196/, se);
   }

</script>

Мне все еще кажется, что мы попали в грязный / глючный уголок мира браузеров.