Wie findet man die absolute oder relative Position von Text oder <br /> in HTML?

Question

Ich frage mich, ob es eine Möglichkeit gibt, wie ich die Position von Buchstaben in HTML mit Javascript oder jQuery finden kann? Ich bezweifle sehr, dass dies möglich ist, aber es würde mein Leben so viel einfacher machen.

Alternativ: Gibt es eine Möglichkeit, die Position der <br /> Tags in HTML mit JS?

Vielen Dank im Voraus.

Answer 1

Wie tdammers erwähnt, gibt es bei der Ausarbeitung eines Prozesses für das, was Sie vorschlagen, viele Nuancen, die je nach dem, was Sie tun, berücksichtigt werden müssen.

Die Grundlagen dessen, was Sie zu tun versuchen, sind:

1. Wickeln Sie ein Element um den Text, für den Sie die Position finden wollen, d. h. im Falle von Text wahrscheinlich ein <span> .
2. Holen Sie sich entweder die $.offset() o $.position() des Elements oder der Elemente, die Sie hinzugefügt haben. Welche Sie auch immer wählen, ist relevant für das, was Sie zu tun versuchen; die erste ist relevant für die document , das zweite auf das enthaltende Element.

Ich habe eine einfache Demo eines Skripts erstellt, das einen in ein Textfeld eingegebenen Begriff in mehreren Absätzen "hervorhebt", indem es div s mit position: absolute et top / left die Verrechnung mit den Begriffen in den Paragraphen (zu finden über die <span> um sie herum).

Beachten Sie, dass dies nur eine Demonstration ist (von $.offset() ); es ist kein produktionsreifer Code. Unter den Codeschnipseln befindet sich ein Link zur Live-Demo des Fiddles.

Zunächst habe ich eine Funktion zum Suchen und Erstellen einer Markierung erstellt <div> für jeden gefundenen Begriff.

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);
        });
    });
}

Dann habe ich einen Rückruf an die $.keyup() Veranstaltung:

$('#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

Es gibt einen einfacheren und leichteren Weg (im Gegensatz zu anderen Antworten, die Overlays vorschlagen), um die Position von Buchstaben in DOM-Elementen zu finden: Verwenden Sie einen Bereich.

// 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();
}

• das Element mit dem Text, der den Zielbuchstaben enthält, ist myElementWithText (z.B. eine <div> )
• das untergeordnete Element mit dem Text (d. h. die textNode ) ist bei Index myTextElementIndex (in den meisten Fällen, 0)
• die Position des gesuchten Buchstabens ist myLetterPosition (z.B. wenn der Text "abcd" und Sie wollen "c" wird dies 2)

Answer 3

Ich nehme an, Sie meinen die Position, an der das Zeichen auf dem Bildschirm angezeigt wird, in Pixeln:

jQuery oder das DOM modellieren keine einzelnen Zeichen in ihren Objektmodellen, sodass Sie die Position eines Zeichens nicht direkt auslesen können.

Der beste Weg, den ich mir vorstellen kann, ist, ein Dummy-Element direkt vor (oder nach) dem Zeichen einzufügen, z. B. eine Null-Breite span mit einer speziellen Klasse, und dann seine Position zu erhalten. Alternativ können Sie das Zeichen in ein solches spezielles Element einpacken und dann die Position, Breite, Höhe usw. des Wrappers ermitteln.

Es ist immer noch nicht trivial, denn Sie müssen den HTML-Code scannen und Sie wollen den HTML-Code nicht zerstören, indem Sie Tags einfügen, wo sie nicht hingehören - wenn Sie zum Beispiel das Zeichen "d" finden wollen, wollen Sie es nicht in <div> in <<span class="magic">d</span>iv> da dies kein wohlgeformtes HTML wäre.

Außerdem kann das Einfügen dieser Dummy-Elemente das Layout leicht verändern, je nachdem, wie der Browser das Kerning handhabt.

Answer 4

In Aktion: 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;
}