Question

我有一些span，其中包含一些字词，例如

        <span id="phrase">Here are some words</span>

我需要将所有'e'个字符的颜色设为红色。

我想考虑获取span.innerText property，从span元素中删除文本节点并在内部（或替代）添加更多跨距，并为它们提供必要的样式。

这是唯一的方式，还是可以更优雅的方式解决？

Answer 1

您肯定可以使用javascript：

var span = document.getElementById('phrase'),
    text = span.innerHTML.split('').map(function(el) {
        return '<span class="char-' + el.toLowerCase() + '">' + el + '</span>';
    }).join('');
  
span.innerHTML = text;

.char-e {
    color: red;
}

<span id="phrase">Here are some words</span>

为方便起见，它将每个字符包含一个带有相应类名的span，这样可以轻松分配各个样式。

警告但是我建议不要对大文本执行此操作，因为上面的代码替换innerHTML如果它包含其他嵌套元素，它可能会破坏HTML。但对于只有文字的小标题，这不会成为问题。

如果您想使用更复杂的HTML标记（包含子元素），则需要改进该函数以递归地处理子项文本内容。

Answer 2

更复杂的实现（包含dfsq代码），用于保存标记：

function addColor(domNode, color, letter){
	if(domNode.nodeType!=1||!domNode.hasAttribute('edited')){
		if(domNode.nodeType==3){
			var newText=document.createElement('span');    
			newText.innerHTML=domNode.textContent;
			newText.setAttribute('edited', true);
			var text = newText.innerHTML.split('').map(function(el){
			  if(el==letter){
				return '<i style=\"color:'+color+'\">'+el+'</i>';
			  }
			  else{
				return el;
			  }
		  }).join('');
		  newText.innerHTML=text;
		  domNode.parentNode.replaceChild(newText,domNode);
		}
		for(var i=0; i<domNode.childNodes.length;i++){
			addColor(domNode.childNodes[i], color, letter);
		}
	}
} 

addColor(document.getElementById('phrase'), 'red', 'e');

<span id="phrase">Here are <a href="#"> test</a>  some text <p> some text again </p> some woreds</span>

用小提琴：http://jsfiddle.net/e6c3yy0j/

Answer 3

我认为使用javascript并不是那么难看：

$(document).ready(function() {
   console.log( "ready!" );
   var text = $("#phrase").html().replace(/e/g, '<span class="red">e</span>');
    $("#phrase").html(text)
});

jsfiddle example

Answer 4

拆分字符串中的每个字符，如果字符为'e'，则使用fontcolor函数给出红色。

代码

var s1 = document.getElementById("phrase");
var str = s1.innerHTML;
var newText = "";
for (var i = 0; i < str.length; i++) {
     if (str[i] == 'e') {
     newText+= str.charAt(i).fontcolor("red");
     }
     else {
        newText += str[i];
    }
}
s1.innerHTML = newText;

Find Fiddle Here

Answer 5

您无法定位文本中的特定字母（第一个使用:first-letter除外）。所以是的，你唯一的选择是用元素包装它们。 span可以使用，FontAwesome的人喜欢使用i。

因此，例如，你可以这样做：

<span id="phrase">H<i>e</i>r<i>e</i> are som<i>e</i> words</span>

并将其添加到您的CSS：

.phrase i {
    font-style: normal; /* Because I is italic by default */
    color: red;
}

Answer 6

如果你需要1个已知字符串为红色，那么你不需要javascript：

HTML

<span id="phrase">H<span class="my-class">e</span>r<span class="my-class">e</span> ar<span class="my-class">e</span> som<span class="my-class">e</span> words</span>

的CSS：

.my-class {
    color: red
}

如何在html元素文本中为特定字母着色？

6 个答案:

代码

Find Fiddle Here