javascript - 获取特定标签周围的特定字符

Question

A simple tool to store and display texts longer than a few lines.
The search button<div id="xyz">will highlight all</div> the words matching the name of objects that are members of the classes listed in searchedClasses, 
itself a member of the KeySet class. The highlighted words are hypertext.

我想检索被 div-xyz 标签包围的字符。
示例输出。
....搜索按钮将突出显示所有单词.....

我可以通过以下获取当前的div标签文本。

function myDivHTML(valueName){
     if((obj = document.getElementById(valueName)) && obj != null){
        return obj.innerHTML;
     }      
}

我尝试使用元素的 offsetParent 属性 - 但有很多可能性，例如 div 标记可能在粗体标记内，粗体标记可能在 p 标记内等等。

我应该怎么做才能获得周围的文字？限制可以是 10、20 个字符。

编辑:

周围文本表示 -> 文本左侧 10 或 20 个字符，右侧 10 或 20 个字符。

Answer 1

最简单的方法是，IMO 将内部 div 的内容用晦涩的字符串包裹在两边，然后在整个段落上使用正则表达式来查找您添加的标记以及两边所需的字符数.像这样:

var full, result,
    // textContent for w3 compliance, innerText for IE
    txt = "textContent" in document.body ? "textContent" : "innerText",
    // Get references to both divs and store the current text of `xyz`
    out = document.getElementById("outer"),
    xyz = document.getElementById("xyz"),
    old = xyz[txt];

// wrap the inner text with something we can easily search for:
xyz[txt] = "||||" + xyz[txt] + "||||";

// Get the whole text, change the DOM text back to what it was
full = out[txt];
xyz[txt] = old;

// Find the text with our markers and surrounding text:
result = /.{0,10}\|{4}.*?\|{4}.{0,10}/.exec(full);

alert(result[0]);
// -> "ch button ||||will highlight all|||| the words"

// Finally, replace your wrapping strings:
result = result[0].replace(/\|{4}/g, "");

alert(result);
// -> "ch button will highlight all the words"

您可能需要稍微调整正则表达式，使其匹配内部字符串前后的两个完整单词。

Example
http://www.jsfiddle.net/Sy4rT/