Question

我正在编写一个代码，用于为输入字段（textt）中的所有花括号着色。我使用for和if语句找到它们没有问题，但我似乎无法为它们着色甚至使它们变粗。这就是我目前所拥有的：

function colorBrackets() {

    var string = document.getElementById("textt").value;

    var a = string.split(" ");

    var result = "";

    for (var i=0; i<a.length; i++) {
        if((a[i] == "{") || (a[i] == "}"))   {   
            a[i].style.color = "blue";
        }
    }
    //brackets is my output field
    document.getElementById("brackets").value = result;
}

我感谢任何帮助！

Answer 1

您需要在要着色的文本部分周围插入跨距。

我刚刚用文字替换了文本中的{和}，其中包含样式化的跨度。
然后将其作为innerHTML附加回来，然后瞧。

function colorBrackets() {
    let string = document.getElementById("input").innerText;
    let result = string.replace(/{|}/g, '<span style="color: red">$&</span>');
    document.getElementById("output").innerHTML = result;
}
colorBrackets();

<div id="input">{Hello }</div>
<div id="output"></div>

PS：这在输入字段内不起作用。由于value的{{1}}必须是字符串而不是HTML。但好消息是，您可以将input与div一起应用。

着色字符串中的特定元素

1 个答案: