Самый простой способ сделать это, 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"
Вы можете немного изменить регулярное выражение, чтобы оно соответствовало, скажем, двум целым словам до и после внутренней строки.