Как найти абсолютную или относительную позицию текста илив HTML?

Question

Мне было интересно, есть ли способ найти положение букв в HTML, используя Javascript или jQuery? Я очень сомневаюсь, что это возможно, но это сделало бы мою жизнь намного проще.

В качестве альтернативы, есть ли способ найти положение тегов <br /> в HTML с помощью JS?

Заранее спасибо.

Answer 1

Как упоминает tdammers, обработка всех деталей создания процесса обработки того, что вы предлагаете, имеет много нюансов, которые, возможно, придется учитывать в зависимости от того, что вы делаете.

Основы того, что вы пытаетесь сделать, это:

1. Оберните элемент вокруг текста, для которого вы хотите найти позицию, т. Е. В случае текста, вероятно, <span>.
2. Получите либо $.offset(), либо $.position() добавленного элемента или элементов. Что бы вы ни выбрали, имеет отношение к тому, что вы пытаетесь сделать; первый относится к document, второй к содержащему его элементу.

Я создал простую демонстрацию скрипта, чтобы «выделить» термин, введенный в текстовое поле в нескольких абзацах, используя div s со смещениями position: absolute и top / left относительно терминов, найденных в абзацах (находится рядом с <span>).

Обратите внимание, это только демонстрация ($.offset()); это не готовый к использованию код. Под фрагментами кода есть ссылка на демоверсию живой скрипки.

Сначала я создал функцию для поиска и выделения выделения <div> для каждого найденного термина.

function highlightWordPositions(word) {
    var $paras = $('p'),
        $spans,
        _top = 0,
        _left = 0;

    $paras.each(function(){
        var $p = $(this),
            regex = new RegExp(word, 'g');

        $p.html($p.text().replace(regex, '<span>' + word + '</span>'));
        $spans = $p.find('span');

        $spans.each(function(){
            var $span = $(this),
                $offset = $span.offset(),
                $overlay = $('<div class="overlay"/>');

            $overlay
                .offset($offset)
                .css({
                    width: $span.innerWidth(),
                    height: $span.innerHeight()
                }).show();

            $(document.body).append($overlay);
        });
    });
}

Затем я прикрепил обратный вызов к событию $.keyup():

$('#term').keyup(function(event){
    var term = this.value;

    if (term == '') {
        $('.overlay').remove();
        return false;
    } else if (term.indexOf(' ') != -1) {
        this.value = term.replace(' ', '');
        return false;
    }

    $('.overlay').remove();

    highlightWordPositions(term);
});

http://jsfiddle.net/JaN75/

Answer 2

Предполагая, что вы имеете в виду позицию, в которой символ отображается на экране, в пикселях:

jQuery или DOM не моделируют отдельные символы в их объектных моделях, поэтому вы не можете непосредственно прочитать положение символа.

Лучший способ, который я могу придумать, - это вставить фиктивный элемент непосредственно перед (или после) символа, например, диапазон нулевой ширины со специальным классом, а затем получить его позицию.В качестве альтернативы, вы можете заключить символ в такой специальный элемент, а затем получить положение, ширину, высоту оболочки и т. Д.

Это все еще не тривиально, потому что вам нужно сканировать HTML, а вам нетВы хотите разбить HTML, вставляя теги там, где они не принадлежат - например, если вы хотите сопоставить символ «d», вы не хотите превращать <div> в <<span class="magic">d</span>iv>, так как это не будетправильно сформированный HTML.

Кроме того, вставка этих фиктивных элементов может немного изменить макет в зависимости от того, как браузер обрабатывает кернинг.

Answer 3

в действии: http://jsfiddle.net/WKgWM/

html:

<p>Percussus ait in fuerat construeret cena reges undis effugere quod una.</p>​

js:

var selection = "dis";
var spn = '<span class="selected">'+selection+'</span>';
$("p").html($("p").html().replace(selection,spn));

css:

.selected{
  background-color:#FF00FF;
}​

Answer 4

Существует более простой и более легкий способ (по сравнению с другими ответами, предлагающими наложения), чтобы найти положение букв в элементах DOM: используйте диапазон.

// returns { left, top, etc } in px
function getLetterPositions(myElementWithText, myTextElementIndex, myLetterPosition) {
    var range = document.createRange();
    range.setStart(myElementWithText.childNodes[myTextElementIndex], myLetterPosition);
    range.setEnd(myElementWithText.childNodes[myTextElementIndex], myLetterPosition+1);
    return range.getBoundingClientRect();
}

• элемент с текстомудерживая целевую букву myElementWithText (например, <div>)
• дочерний элемент с текстом (т.е. textNode) имеет индекс myTextElementIndex (в большинстве случаев 0)
• позиция буквы, которую вы пытаетесь найти: myLetterPosition (например, если текст "abcd", а вы хотите "c", это будет 2)