syntax-tree / hast-util-find-and-replace Goto Github PK
View Code? Open in Web Editor NEWutility to find and replace text in a hast tree
Home Page: https://unifiedjs.com
License: MIT License
utility to find and replace text in a hast tree
Home Page: https://unifiedjs.com
License: MIT License
The findAndReplace function is not working with style property and style tag.
Example:
const doc = <html><head><style>main {color: rgb(60,61,62);background-color: rgb(255,255,255);font-family: Helvetica;}</style></head><body><main>Subject line: Test Template<br><p><span style="color: rgb(60,61,62);background-color: rgb(255,255,255);font-family: Helvetica;">Hi {{shomare}}, </span></p>
<p><span style="color: rgb(60,61,62);background-color: rgb(255,255,255);font-family: Helvetica;">Version 2 Create the fields for your custom setting. The data in these fields are cached with the application.</span><span style="color: rgba(0,0,0,0.87);background-color: rgb(255,255,255);font-size: 13px;">This is a test template. </span><span style="color: rgb(60,61,62);background-color: rgb(255,255,255);font-family: Helvetica;">Create the fields for your custom setting. The data in these fields are cached with the application.</span><span style="color: rgba(0,0,0,0.87);background-color: rgb(255,255,255);font-size: 13px;">This is a test template. </span><span style="color: rgb(60,61,62);background-color: rgb(255,255,255);font-family: Helvetica;">Create the fields for your custom setting. The data in these fields are cached with the application.</span><span style="color: rgba(0,0,0,0.87);background-color: rgb(255,255,255);font-size: 13px;">This is a test template. </span><span style="color: rgb(60,61,62);background-color: rgb(255,255,255);font-family: Helvetica;">Create the fields for your custom setting. The data in these fields are cached with the application.</span><span style="color: rgba(0,0,0,0.87);background-color: rgb(255,255,255);font-size: 13px;">This is a test template. </span><span style="color: rgb(60,61,62);background-color: rgb(255,255,255);font-family: Helvetica;">Create the fields for your custom setting. The data in these fields are cached with the application.</span><span style="color: rgba(0,0,0,0.87);background-color: rgb(255,255,255);font-size: 13px;">This is a test template.. </span><span style="color: rgb(60,61,62);background-color: rgb(255,255,255);font-family: Helvetica;">Create the fields for your custom setting. The data in these fields are cached with the application.</span><span style="color: rgba(0,0,0,0.87);background-color: rgb(255,255,255);font-size: 13px;">This is a test template....</span><br></p>
<ol>
<li><span style="color: rgb(60,61,62);background-color: rgb(255,255,255);font-family: Helvetica;">Create the fields for your custom setting. The data in these fields are cached with the application.</span><span style="color: rgba(0,0,0,0.87);background-color: rgb(255,255,255);font-size: 13px;">This is a test template.</span></li>
<li><span style="color: rgb(60,61,62);background-color: rgb(255,255,255);font-family: Helvetica;">Create the fields for your custom setting. The data in these fields are cached with the application.</span><span style="color: rgba(0,0,0,0.87);background-color: rgb(255,255,255);font-size: 13px;">This is a test template.</span></li>
<li><span style="color: rgb(60,61,62);background-color: rgb(255,255,255);font-family: Helvetica;">Create the fields for your custom setting. The data in these fields are cached with the application.</span><span style="color: rgba(0,0,0,0.87);background-color: rgb(255,255,255);font-size: 13px;">This is a test template.</span></li>
</ol>
<p></p>
<p></p>
<p><span style="color: rgba(0,0,0,0.87);background-color: rgb(255,255,255);font-size: 13px;">Thanks.</span></p>
</main></body></html>'
const hast = fromDom(doc)
findAndReplace(hast, [[/font-family:\s*(.+?(?=;));/gi, '']], undefined, { ignore: ['title', 'script', 'svg', 'math']})
console.log("toHtml", toHtml(hast))
Results:
<style>main {color: rgb(60,61,62);background-color: rgb(255,255,255);font-family: Helvetica;}</style>Subject line: Test TemplateHi {{shomare}},
Version 2 Create the fields for your custom setting. The data in these fields are cached with the application.This is a test template. Create the fields for your custom setting. The data in these fields are cached with the application.This is a test template. Create the fields for your custom setting. The data in these fields are cached with the application.This is a test template. Create the fields for your custom setting. The data in these fields are cached with the application.This is a test template. Create the fields for your custom setting. The data in these fields are cached with the application.This is a test template.. Create the fields for your custom setting. The data in these fields are cached with the application.This is a test template....
Thanks.
It should find all font-family styles and remove them within the script tag and all the style properties on different types of nodes.
Input:
<head><style>main {color: rgb(60,61,62);background-color: rgb(255,255,255);font-family: Helvetica;</style></head>
and
<span style="color: rgb(60,61,62);background-color: rgb(255,255,255);font-family: Helvetica;">Version 2 Create the fields for your custom setting. The data in these fields are cached with the application.</span>
Output:
<head><style>main {color: rgb(60,61,62);background-color: rgb(255,255,255);</style></head>
and
<span style="color: rgb(60,61,62);background-color: rgb(255,255,255);>Version 2 Create the fields for your custom setting. The data in these fields are cached with the application.</span>
I don't think of any right now
3 and 4
https://codesandbox.io/s/hast-replace-error-fzuxo3?file=/error.spec.js
The code sandbox has a broken test. It should not be broken.
Both replaceme instances should be replaced.
The first "replaceme" instance is replaced the 2nd bold instance of "replaceme" is not replaced. If I move the bold text earlier in the sentence there is no issue. If I make the text not bold there is also no issue.
I had trouble finding the bug in the sourcecode of this package. Maybe you can help out.
Node v16, Node v14
npm v7
Linux
Webpack, Parcel
I would like want to fine-tune the ignore
section of a findAndReplace to ignore replacing things inside e.g. something that has a specific class name; would be nice if i could specify a function so i can customize whether to ignore a node
only being able to specify tagNames to ignore doesn't give me the granularity i need to ignore the things i want
I'd like to be able to pass in a function to ignore
, e.g.
ignore: (node: Node) => boolean
Can't think of any
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.