это забавная идея.во всяком случае, я создал мини-класс в mootools , который работает несколько.Мне еще предстоит протестировать его в более сложном макете страницы, но исходная посылка состоит в том, чтобы найти все элементы с помощью innerHTML, которые могут быть полезны, отсканировать текст на соответствие, если он найден, клонировать родительский элемент, заменив текст на диапазон,получение смещений диапазона сверху / слева и т. д. Это НЕ приведет к изменению HTML существующего элемента и будет масштабируемым.
результат здесь: http://www.jsfiddle.net/dimitar/eBPFb/
и источник такой:
var getTextOffset = new Class({
Implements: [Options],
options: {
selector: "*", // all elements
filter: "innerHTML", // only those that have this property are worth lookign at
skip: ["link", "style", "script","head","html","meta","input","textarea","select","body"] // useless tags we don't care about
},
initialize: function(text, options) {
this.setOptions(options);
if (!text) return; // nothing to do.
this.elements = document.getElements(this.options.selector).filter(function(el) {
return this.options.filter in el && !this.options.skip.contains(el.get("tag"));
}, this);
if (!this.elements.length)
return;
return this.findText(text);
},
findText: function(text) {
var coords = false;
this.elements.some(function(el) {
var eltext = el.get("html");
if (eltext.contains(text)) {
var c = el.getCoordinates();
var clone = new Element("div", {
"class": "clone",
styles: c,
html: eltext.replace(text, "<span id='posText'>"+text+"</span>")
}).inject(document.body, "top");
coords = document.id("posText").getCoordinates();
clone.destroy();
}
});
return coords;
}
});
var pleistoscene = new getTextOffset("Pleistocene");
if (pleistoscene) // found text so highlight it
new Element("div", {
styles: $merge(pleistoscene, {
position: "absolute",
background: "yellow"
}),
opacity: .7,
title: pleistoscene.top + "px top"
}).inject(document.body); // mouseover the yelow element to see offset (pleitoscene.top)
надеюсь, что это имеет смысл - это грубо, но должно дать вам некоторые идеи.если вы используете выделение для этого с помощью мыши, это становится намного проще, чем поиск.Кроме того, имейте в виду, что при поиске в html поиск по a very good year с разметкой a very <a href=''>good</a> year завершится неудачно (вместо этого вы можете запросить текстовые свойства).
он использует array.some (), которыйпрекратить зацикливание после первого матча.если вы хотите найти несколько экземпляров, вам необходимо провести рефакторинг.
удачи