Using a combination of look-arounds and tag omission for advanced parsing

Question

Using a combination of look-arounds and tag omission for advanced parsing

I am trying to identify text that is not part of another word (which I have working successfully), but I also want to ensure that the text is not inside an <a> tag.

"Java <li>Javascript</li> <a href="">Some Java here</a> more java"

var regex2 = new RegExp(`(?<![a-z])Java(?![a-z])`, "gi");

text = text.replace(regex2, '++JavaUpdated++');

The code snippet above works fine, however when I tried to include additional lookarounds as shown below, it didn't work as expected:

var regex2 = new RegExp(`(?<![a-z])(?<!<a.*)Java(?!.*<\/a>)(?![a-z])`, "gi");

javascript regex regex-lookarounds

Answer 1

Answer №1

Avoid using regular expressions to parse HTML, but in case you really need to...

If you are determined to use regex, here is an example of a regex expression that can be used if your browser supports lookbehinds:

(?<![^\s])JavaScript(?![^\s])(?!(.(?!<a))*<\/a>)

Regex Example

This regex pattern checks for whitespace before and after the word JavaScript, while also ensuring it is not within tags using negative lookahead.

I see that your original regex includes a negative lookbehind, which may not be supported in JavaScript versions prior to 2018. Make sure to check browser compatibility if you decide to use this feature. Lookbehinds are specifically available in browsers that adhere to the ECMA2018 standard.

If you prefer not to rely on negative lookbehinds, an alternative approach could be:

(?:\s$|^)JavaScript(?![^\s])(?!(.(?!<a))*<\/a>)

Alternative Regex Demo

In this scenario, the regex specifies not to match JavaScript if it is preceded by any character other than whitespace or if it is part of a word.

Answer 2

Avoid using regular expressions to parse HTML, but in case you really need to...

If you are determined to use regex, here is an example of a regex expression that can be used if your browser supports lookbehinds:

(?<![^\s])JavaScript(?![^\s])(?!(.(?!<a))*<\/a>)

Regex Example

This regex pattern checks for whitespace before and after the word JavaScript, while also ensuring it is not within tags using negative lookahead.

I see that your original regex includes a negative lookbehind, which may not be supported in JavaScript versions prior to 2018. Make sure to check browser compatibility if you decide to use this feature. Lookbehinds are specifically available in browsers that adhere to the ECMA2018 standard.

If you prefer not to rely on negative lookbehinds, an alternative approach could be:

(?:\s$|^)JavaScript(?![^\s])(?!(.(?!<a))*<\/a>)

Alternative Regex Demo

In this scenario, the regex specifies not to match JavaScript if it is preceded by any character other than whitespace or if it is part of a word.

Answer 3

Answer №2

To tackle this issue, you can start by dividing the string based on <a> tags. Then, process each segment of the string individually. Replace occurrences of Java with ++JavaUpdated++ only if the segment does not commence with <a:

const str = 'Java <li>Javascript</li> <a href="">Some Java here</a> more java';

let newstr = str.split(/(<a.*?<\/a>)/)
                .map(v => (v.slice(0, 2) == '<a') ? v : v.replace(/\bJava\b/i, '++JavaUpdated++'))
                .join();

console.log(newstr);

Answer 4

To tackle this issue, you can start by dividing the string based on <a> tags. Then, process each segment of the string individually. Replace occurrences of Java with ++JavaUpdated++ only if the segment does not commence with <a:

const str = 'Java <li>Javascript</li> <a href="">Some Java here</a> more java';

let newstr = str.split(/(<a.*?<\/a>)/)
                .map(v => (v.slice(0, 2) == '<a') ? v : v.replace(/\bJava\b/i, '++JavaUpdated++'))
                .join();

console.log(newstr);

Answer 5

Answer №3

When handling cases where text may not break into separate nodes, the following method can be utilized to address this scenario. The strategy involves traversing through the Text nodes within the DOM while disregarding any anchor tags that are encountered along the way.

// Utilizing RegExp as a literal
const re = /(?<![a-z])Java(?![a-z])/gi

const walkTextNodesIgnoringAnchors = (el, fn) =>
  el.childNodes.forEach(child => {
    // Exclude anchors
    if (child.nodeName === 'A') return
    
    // For Text nodes, execute the provided function
    else if (child.nodeName === '#text') fn(child)
    
    // Otherwise, recursively traverse deeper
    else walkTextNodes(child, fn)
  })

const textEl = document.querySelector('.js-text')

walkTextNodesIgnoringAnchors(textEl, (textNode) => {
  textNode.textContent = textNode.textContent.replace(re, '++JavaUpdated++')
})

<div class="js-text">Java Javascript <a href="">Some Java here</a> more java</div>

Answer 6

When handling cases where text may not break into separate nodes, the following method can be utilized to address this scenario. The strategy involves traversing through the Text nodes within the DOM while disregarding any anchor tags that are encountered along the way.

// Utilizing RegExp as a literal
const re = /(?<![a-z])Java(?![a-z])/gi

const walkTextNodesIgnoringAnchors = (el, fn) =>
  el.childNodes.forEach(child => {
    // Exclude anchors
    if (child.nodeName === 'A') return
    
    // For Text nodes, execute the provided function
    else if (child.nodeName === '#text') fn(child)
    
    // Otherwise, recursively traverse deeper
    else walkTextNodes(child, fn)
  })

const textEl = document.querySelector('.js-text')

walkTextNodesIgnoringAnchors(textEl, (textNode) => {
  textNode.textContent = textNode.textContent.replace(re, '++JavaUpdated++')
})

<div class="js-text">Java Javascript <a href="">Some Java here</a> more java</div>

Using a combination of look-arounds and tag omission for advanced parsing

Answer №1

Answer №2

Answer №3

Similar questions

Connecting two COTURN servers for seamless communication

Using the array.prototype.map method on props in React.js results in an array that is devoid

Combining various components within an inactive element tag using Vue

"Effortlessly move files with Filedrop HTML 5 and Jquery drag-and-drop feature

JavaScript does not reflect updates made to the ASP.Net session

Discover the process of dynamically importing JavaScript libraries, modules, and non-component elements within a Next.js

Stay updated with the complex query change feed in RethinkDB

Converting JSON to a list using JavaScript

Fetching dynamic information via AJAX for a jQuery tooltip

The like button seems to be malfunctioning and I'm not sure what the issue is

Is there a way to convert arrow functions in vue files through transpilation?

Utilizing AngularJS for Converting Date Formats from JSON and HTML Elements

A script error occurs exclusively on dynamic routing in a static web page generated by NUXT

Embracing PWAs with subdomains – seamless installation

Personalized animated Reactflow Connection Lines

Delete an entry from the localStorage

What sets Angular 2 apart when it comes to utilizing [ngStyle] versus [style.attribute]?

When utilizing res.redirect in Express, an error is triggered stating "Uncaught SyntaxError: Unexpected token <""

Converting a JavaScript array into JSON using PHP

Incorporating object into main function of VueJS root component