단락에서 링크의 색인 위치 반환

Sebter

단락 innerHTML에서 모든 링크의 배열을 가져 와서 textContent와 비교하여 내용과 함께 시작 및 끝 색인을 저장하고 싶습니다.

<p id ="1">This is a <a href ="/hey">Link</a> and this is also a <a href="/hey">Link</a></p>

그래서 이것을 위해 나는 다음과 같은 것을 얻으려고합니다.

//I know this is formatted weird, just showing an example of what data would like at end.
links = [
  'link1': { start_index: 11, end_index: 14, href: '/hey, text: 'Link'},
  'link2': { start_index: 35, end_index: 38, href: '/hey, text: 'Link'},
]

start_index 및 end_index는 textContent 단락의 링크 위치를 기반으로합니다.

indexOf ()를 사용해 보았습니다.

str = document.getElementById("1").innerHTML;
var index_start = str.indexOf("<a href ="/hey">Link</a>");

그러나 이것은 innerHTML의 링크 색인을 반환합니다. textContent에서 위치를 얻는 방법이나 모든 링크의 위치를 ​​얻는 방법을 모르겠습니다.

혼란 스러우면 감사합니다.

charlietfl

여기에 시작 개념 솔루션이 있습니다.

의 복제본을 만든 <p>다음 해당 복제본의 링크를 자리 표시 자로 대체 ||하여 해당 자리 표시자를 사용하여 텍스트 문자열을 배열로 분할 할 수 있습니다.

그런 다음 링크를 객체 배열로 매핑하고 분할 된 텍스트 배열에서 이전 텍스트 길이를 가져옵니다 (단락의 시작 부분이 아니라 지금은 이전 링크).

조금 더 개발하면 링크를 텍스트에 다시 넣을 수 있도록 리버스 엔지니어링하는 것이 매우 쉽습니다.

const p = document.querySelector('p');

const txtArray = getTextInArray(p)

const links = Array.from(p.querySelectorAll('a')).map((el, i) => {
  return {
    href: el.href,
    linkTxt: el.textContent,
    prevTxtLength: txtArray[i].length
  }
})

console.log(links)


function getTextInArray(p) {
  let clone = p.cloneNode(true);
  clone.querySelectorAll('a').forEach(a => a.replaceWith('||'));
  return clone.textContent.split('||');
}
<p>Some text <a href="foo">Foo</a> some more text <a href="boo">Boo</a></p>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

단락의 캐럿 위치에서 특정 인라인 가져 오기

분류에서Dev

R 문자열에서 단어의 위치 반환

분류에서Dev

Google 검색 요청의 인용 태그에서 전체 링크를 반환하는 방법

분류에서Dev

목록에서 숫자 범위를 검색하지만 첫 번째 예의 색인을 반환합니다.

분류에서Dev

활성 링크의 배경 위치 변경-이미지 기반 탐색

분류에서Dev

목록에서 임의의 하위 하위 목록과 색인을 반환합니다.

분류에서Dev

Python에서 배열 검색, 위치 반환

분류에서Dev

python3 단위 테스트, 작동하지 않는 인스턴스 메서드의 반환 패치

분류에서Dev

파이썬의 메모리 위치 반전 인덱스에서 단순

분류에서Dev

줄에서 단어의 위치를 반환하는 방법, C 언어

분류에서Dev

스크롤 jQuery / CSS에서 색상의 배경 위치 수평 전환 변경

분류에서Dev

2 차원 배열에서 1 차원 배열의 인덱스를 검색하고 java 행 단위로 행 반환

분류에서Dev

Pandas Dataframe의 문자열에서 첫 번째 숫자 / 문자의 인덱스 / 위치를 반환합니다.

분류에서Dev

벡터 삽입 메서드의 반환 반복기 위치

분류에서Dev

검색어에서 일치하는 단어를 반환

분류에서Dev

배열에서 숫자의 위치 반환

분류에서Dev

배열의 특정 위치에서 마지막 값 반환

분류에서Dev

Java의 배열에서 위치를 반환하는 방법

분류에서Dev

라인의 특정 위치에서 특정 문자 검색

분류에서Dev

문자열에서 문자의 색인 위치 찾기

분류에서Dev

vba를 사용하여 단어에서 단락 위에있는 첫 번째 헤더의 값을 반환하는 방법은 무엇입니까?

분류에서Dev

범위 내의 텍스트 검색, 일치하는 경우 일치 값 반환

분류에서Dev

numpy에서 열당 인덱스 단위 색인의 효율성

분류에서Dev

Python> Selenium : 텍스트 파일의 링크를 기반으로 "로그인 된"환경에서 웹 스크래핑

분류에서Dev

반응 형 디자인에서 누락 된 링크

분류에서Dev

Elasticsearch : 응답 문서가 반환되는 단어의 색인 찾기

분류에서Dev

반환 값을 반환하지 않는 파이썬 단위 테스트 패치 모의 메서드

분류에서Dev

라인의 특정 위치 범위 내에서 검색하는 방법

분류에서Dev

어떻게 이름에 의해 객체의 위치를 반환?

Related 관련 기사

  1. 1

    단락의 캐럿 위치에서 특정 인라인 가져 오기

  2. 2

    R 문자열에서 단어의 위치 반환

  3. 3

    Google 검색 요청의 인용 태그에서 전체 링크를 반환하는 방법

  4. 4

    목록에서 숫자 범위를 검색하지만 첫 번째 예의 색인을 반환합니다.

  5. 5

    활성 링크의 배경 위치 변경-이미지 기반 탐색

  6. 6

    목록에서 임의의 하위 하위 목록과 색인을 반환합니다.

  7. 7

    Python에서 배열 검색, 위치 반환

  8. 8

    python3 단위 테스트, 작동하지 않는 인스턴스 메서드의 반환 패치

  9. 9

    파이썬의 메모리 위치 반전 인덱스에서 단순

  10. 10

    줄에서 단어의 위치를 반환하는 방법, C 언어

  11. 11

    스크롤 jQuery / CSS에서 색상의 배경 위치 수평 전환 변경

  12. 12

    2 차원 배열에서 1 차원 배열의 인덱스를 검색하고 java 행 단위로 행 반환

  13. 13

    Pandas Dataframe의 문자열에서 첫 번째 숫자 / 문자의 인덱스 / 위치를 반환합니다.

  14. 14

    벡터 삽입 메서드의 반환 반복기 위치

  15. 15

    검색어에서 일치하는 단어를 반환

  16. 16

    배열에서 숫자의 위치 반환

  17. 17

    배열의 특정 위치에서 마지막 값 반환

  18. 18

    Java의 배열에서 위치를 반환하는 방법

  19. 19

    라인의 특정 위치에서 특정 문자 검색

  20. 20

    문자열에서 문자의 색인 위치 찾기

  21. 21

    vba를 사용하여 단어에서 단락 위에있는 첫 번째 헤더의 값을 반환하는 방법은 무엇입니까?

  22. 22

    범위 내의 텍스트 검색, 일치하는 경우 일치 값 반환

  23. 23

    numpy에서 열당 인덱스 단위 색인의 효율성

  24. 24

    Python> Selenium : 텍스트 파일의 링크를 기반으로 "로그인 된"환경에서 웹 스크래핑

  25. 25

    반응 형 디자인에서 누락 된 링크

  26. 26

    Elasticsearch : 응답 문서가 반환되는 단어의 색인 찾기

  27. 27

    반환 값을 반환하지 않는 파이썬 단위 테스트 패치 모의 메서드

  28. 28

    라인의 특정 위치 범위 내에서 검색하는 방법

  29. 29

    어떻게 이름에 의해 객체의 위치를 반환?

뜨겁다태그

보관