使用Javascript中的文本位置（文本范围）以html格式替换文本

Question

我有一个字符串，我想用html字体颜色替换文本，我需要使用包含跨度（键）开始和跨度（值）长度的字典进行替换。 关于如何在JS中执行此操作以便将我的所有文本正确替换为html的想法？

str = "Make 'this' become blue and also 'that'."

// color_dict contains the START of the span and the LENGTH of the word.
// i.e. this & that are both size 4.

color_dict = {6: "4", 34: "4"};

console.log(str.slice(6, 10));  //obviously this is just a slice
console.log(str.slice(34, 38));

// This is what I would like at the end.

document.write("Make '<font color='blue'>this</font>' become blue and also '<font color='blue'>that</font>'.");

总的来说，我想用一些html替换原始字符串，但要使用包含文本开头和子字符串长度的字典。

非常感谢！

Answer 1

这使用正则表达式来完成工作。 字典的处理顺序相反，因此替换索引不会更改。

 var str = "Make 'this' become blue and also 'that'." // color_dict contains the START of the span and the LENGTH of the word. // ie this & that are both size 4. var color_dict = { 6: "4", 34: "4" }; // get keys sorted numerically var keys = Object.keys(color_dict).sort(function(a, b) {return a - b;}); // process keys in reverse order for (var i = keys.length - 1; i > -1; i--) { var key = keys[i]; str = str.replace(new RegExp("^(.{" + key + "})(.{" + color_dict[key] + "})"), "$1<font color='blue'>$2</font>"); } document.write(str); 

Answer 2

HTML ：

<div id="string">Make 'this' become blue and also 'that'.</div>

jQuery的

var str = $("#string").text(); // get string
color_dict = [{index: 6, length: 4}, {index: 34, length: 4}]; // edited your object to instead be an array of objects

for(var i = 0; i < color_dict.length; i++) {
    str = str.substring(0, color_dict[i].index) +
          "<span style='color: blue'>" + 
          str.substring(color_dict[i].index, color_dict[i].length + color_dict[i].index) + 
          "</span>" + 
          str.substring(color_dict[i].index + color_dict[i].length);
    for(var j = i+1; j < color_dict.length; j++) {
        color_dict[j].index += color_dict[i].length + 29; // shift all further indeces back because you added a string
    }
}

$("#string").html(str); // update string

请参阅JSFiddle上的工作示例 。

这是什么：

1. 取得文字
2. 设置字典
3. 对于字典中的每个“单词”，将原始字符串更改为：
   • +之前的文字
   • <div style="color: blue">
   • 字典文字
   • </div>
   • 字典文字之后的文字

另外， 不推荐使用 <font>标记及其color属性。 改用CSS。

Answer 3

您可以这样做：

var str = "Make 'this' become blue and also 'that'.";
var new_str = '';
var replacements = [];
var prev = 0;
for (var i in color_dict) {
    replacements.push(str.slice(prev, parseInt(i)-1));
    prev = parseInt(i) + parseInt(color_dict[i]) + 1;
    replacements.push(str.slice(parseInt(i)-1, prev));
}
for (var i = 0; i < replacements.length; i+=2) {
    new_str += replacements[i] + "<font color='blue'>" + replacements[i+1] + "</font>";
}
new_str += str.substr(-1);
console.log(new_str); 
//Make <font color='blue'>'this'</font> become blue and also <font color='blue'>'that'</font>.

Answer 4

这是一个可以执行此操作的函数，它将字符串和字典作为您定义的格式的参数：

function decorateString(str, color_dict) {
    // turn into more suitable array of {start, len}
    var arr = Object.keys(color_dict).map(function (start) {
        return {
            start: parseInt(start),
            len: parseInt(color_dict[start])
        };
    });
    // sort on descending start position to ensure proper tag-insertion
    arr.sort(function(a, b) {
        return a.start < b.start;
    });
    // build new string and return it
    return arr.reduce(function(str, word) {
        return str.substr(0, word.start) 
            + "<font color='blue'>" 
            + str.substr(word.start, word.len)
            + '</font>' 
            + str.substr(word.start + word.len);
    }, str);
}

如下使用它：

str = "Make 'this' become blue and also 'that'."
color_dict = {6: "4", 34: "4"};
document.write(decorateString(str, color_dict));

这是一个JS小提琴