Question

我在JS中有一个字符串变量，它包含一些文本。有时会发生所述文本包含HTML标记。

我需要做的是将每个单词都包含在单独的span标记中。例如

This is text =＆gt; This is text

理想情况下，它应该在不使用JQuery的情况下实现，但不是必需的。

我尝试过几种不同的解决方案，包括Regexes（大部分时间都可以使用，但并非总是如此）。

我正在使用Polymer 2.0和ShadyDOM。

修改

也可能发生标签有属性的问题。例如： So I have heard. =＆gt; So I have heard

Answer 1

您可以使用DOM从字符串创建DOM.childNodes元素并循环遍历所有子节点。然后用span替换字符串。

＆＃13;

function changeText(s){
    var div = document.createElement('div');
    div.innerHTML = s;
    recurseDomChildren(div, true);
    var str = div.innerHTML.replace(/spfrnt/g, "<span>").replace(/spback/g, "</span>");
    return str;
}
function recurseDomChildren(start, output){
    var nodes;
    if(start.childNodes){
        nodes = start.childNodes;
        loopNodeChildren(nodes, output);
    }
}
function loopNodeChildren(nodes, output){
    var node;
    for(var i=0;i<nodes.length;i++){
        node = nodes[i];
        addSpanToNode(node);
        if(node.childNodes)recurseDomChildren(node, output);
    }
}
function addSpanToNode(node){
    if(node.nodeType != 3) return;
    var tt = node.data;
    var strArr = tt.split(" ");
    var str = "";
    for( var i = 0 ; i < strArr.length; i++) if (strArr[i]){
        str += 'spfrnt' + strArr[i] + 'spback ';
    }
    node.data = str;   
}
console.log("firstCase: ", changeText('<span class="test">So I have heard.</span>'));
console.log("secondCase: ", changeText('This is <p>text</p>'));

＆＃13;

Answer 2

您不需要Regex来完成此任务。只需几个数组操作。

var str = "Your string of info here";

//Create an array with each word in the string
//Map the array wrapping each word in a <span>
//You can also then join the array by adding .join('') to the end
var res = str.split().map(m => {return `<span>${m}</span>`});

js将单词换成跨度而不修改内联html

2 个答案: