在html中找到文本(字母或单词)或br/的绝对或相对位置?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (28)

我想知道是否有办法使用javascript或jQuery在html中找到字母的位置?

或者,是否有一种方法可以找到<br />使用js的html标记?

提前谢谢。

提问于
用户回答回答于

你想要做的事情的基本内容是:

  1. 将要查找的位置的元素环绕在文本周围(在文本的情况下,可能是<span>
  2. 要么获得$.offset()$.position()添加的一个或多个元素。无论您选择哪一种,都与您想要做的事情相关;第一种是与document,第二个到包含元素。

我创建了一个脚本的简单演示,以“突出显示”在几个段落中输入到文本框中的术语。

注意,这只是一个演示$.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/JaN 75/

用户回答回答于

有一种更简单、更轻量级的方法(相对于其他建议覆盖的答案)来查找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)

扫码关注云+社区

领取腾讯云代金券