为字符串中的特定元素着色

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

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

我只是将文本中的 { 和 } 替换为 { 和 }，周围环绕着样式化的跨度。
然后将其附加回内部HTML 瞧。

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：这在输入字段中不起作用。因为 input 的 value 必须是字符串而不是 HTML。但好消息是，您可以在 div 和 contenteditable = true.

中应用它

为字符串中的特定元素着色

Coloring specific elements in a string

javascript

for-loop

brackets