如何通过Javascript检查最近的html标记？

我有一个关于javascript的问题。我有以下html代码，4个按钮，2个突出显示颜色，1个清除所选颜色，1个清除所有颜色

当用户使用鼠标高亮显示文本并单击“红色”按钮（例如，我的名字是John）时，所选文本将高亮显示为红色（假设有一个名为“红色”的类）

e、 g

//选择文本并单击按钮之前

我叫约翰，
我住在ABC，我有一辆车。
我喜欢玩电视游戏。

//选择文本后，单击按钮

我叫约翰，
我住在ABC，我有一辆车。
我喜欢玩电视游戏。

当用户单击“全部清除”按钮时，所有颜色将消失

和“清除”按钮（我不知道这部分），当用户选择彩色文本时，例如，我的名字是John，然后单击“清除”，颜色将消失

e、 g

//选择彩色文本并单击按钮之前

我叫约翰，
我住在ABC，我有一辆车。
我喜欢玩电视游戏。

//选择彩色文本后，单击按钮

我叫约翰，
我住在ABC，我有一辆车。
我喜欢玩电视游戏。

有人能帮我吗？多谢各位

// javascript
function colour(colour) {
var selectTxt =    
   window.getSelection() ||
   document.getSelection() ||
   (document.selection ? document.selection.createRange().text : ''),
   targetHTML = document.getElementById('text');
   targetHTML.innerHTML =
     targetHTML.innerHTML.replace(
              RegExp(selectTxt),
              '<span class="colour">'+selectTxt+'</span>');

}

function clear_colour() {
     // I don't know how to do in here??
}

function clear_colour_all() {
    var para = document.getElementById('text');
    para.innerHTML = 'My name is John, I live in ABC and I have a car. I like to play TV game.';
}

//javascript
功能颜色（彩色）{
var selectTxt=
window.getSelection（）||
document.getSelection（）||
（document.selection？document.selection.createRange（）.文本：“”），
targetHTML=document.getElementById（'text'）；
targetHTML.innerHTML=
targetHTML.innerHTML.replace(
RegExp（selectTxt），
''+选择TXT+''；
}
功能清晰颜色（）{
//我不知道在这里该怎么办？？
}
功能清除\u颜色\u全部（）{
var para=document.getElementById（'text'）；
para.innerHTML='我叫约翰，住在美国广播公司，我有一辆车。我喜欢玩电视游戏。'；
}

//HTML

我叫约翰，
我住在ABC，我有一辆车。
我喜欢玩电视游戏。

我建议使用jQuery解决跨浏览器问题，并更优雅地处理这些问题。但在纯JS级别上，一种粗糙的方法是：

function clear_colour() {
   targetHTML = document.getElementById('text');
   targetHTML.innerHTML = targetHTML.innerText ? targetHTML.innerText : targetHTML.textContent;
}

注意：

innerText

仅适用于IE。其他浏览器（基于FF/Webkit）使用符合标准的

textContent

属性

使用jQuery：

function clear_colour() {
   var clearText = $('#text span.colour').text();
   $('#text').html(clearText);
}

---

以下是一种处理最新Chrome和Firefox的方法：

function clear_colour(){
    var selectTxt =    
       window.getSelection() ||
       document.getSelection() ||
       (document.selection ? document.selection.createRange().text : ''),
        //get the span
        span = (selectTxt.anchorNode || selectTxt.extentNode).parentNode,
        //set a new text node
        clearedTxt = document.createTextNode(span.innerHTML);
        //replace the span with the new text node
        span.parentNode.replaceChild(clearedTxt, span);
};

---

谢谢你的回复。我在Chrome中试用了它，它是有效的，您介意提供jQuery版本吗？这有助于我了解更多信息。与其使用

innerText

，

textContent

，不如使用

.nodeValue

，它适用于所有应用程序browsers@Raynos：

nodeValue

是个棘手的问题，因为您必须执行类似于

targetHTML.firstChild.firstChild.nodeValue的操作才能获取文本（第二个
firstChild
是
span
中的文本节点）。