Tips for modifying text by filtering it and substituting it with alternative content

Question

Tips for modifying text by filtering it and substituting it with alternative content

I have a website's contact page where there is a phone number and I want to create a code that can identify this specific phone number and replace it with a new one.

Below is the code snippet:

<div class="elementor-widget-container">
    <h2 class="elementor-heading-title elementor-size-default"><b style="">Phon</b>e</h2>
</div>

<div class="elementor-element elementor-element-071bea1 elementor-widget elementor-widget-heading is-mac" data-id="071bea1" data-element_type="widget" data-widget_type="heading.default">
    <div class="elementor-widget-container">
        <h2 class="elementor-heading-title elementor-size-default">888-299-1979</h2>
    </div>
</div>

html css

Answer 1

Answer №1

In CSS, filtering for content is not directly possible. However, there is a workaround that involves adding content through an attribute and displaying it using a pseudo-element.

Here's how you can do it:

span[number]::after {
  content: attr(number);
}

<span number="888-299-1979"></span>

You can also "search" for the content and modify it in this way:

/* "searches" the number */
[number="888-299-1979"]::after {

  /* changes the number */
  content: "xxx-xxx-xxxx";  
}

<span number="888-299-1979"></span>

Answer 2

In CSS, filtering for content is not directly possible. However, there is a workaround that involves adding content through an attribute and displaying it using a pseudo-element.

Here's how you can do it:

span[number]::after {
  content: attr(number);
}

<span number="888-299-1979"></span>

You can also "search" for the content and modify it in this way:

/* "searches" the number */
[number="888-299-1979"]::after {

  /* changes the number */
  content: "xxx-xxx-xxxx";  
}

<span number="888-299-1979"></span>

Answer 3

Answer №2

Are you looking to use CSS to locate a phone number on your website and then replace it with a different phone number?

Surprisingly, CSS cannot actually search for a specific phone number on your website. To achieve this, you will need to utilize a selector in your CSS.

Here is your code block with an added ID:

<h2 class="elementor-heading-title elementor-size-default" id="phone-number">888-299-1979</h2>

Your CSS:

#phone-number {
    visibility: hidden;
}

#phone-number:after {
    visibility: visible;
    content: "123456789"; //enter your new phone number here
}

Alternatively, you can achieve the same result without using CSS by utilizing JavaScript [RECOMMENDED]:

document.getElementById("phone-number").innerHTML = "your_new_phone_number_here";

Answer 4

Are you looking to use CSS to locate a phone number on your website and then replace it with a different phone number?

Surprisingly, CSS cannot actually search for a specific phone number on your website. To achieve this, you will need to utilize a selector in your CSS.

Here is your code block with an added ID:

<h2 class="elementor-heading-title elementor-size-default" id="phone-number">888-299-1979</h2>

Your CSS:

#phone-number {
    visibility: hidden;
}

#phone-number:after {
    visibility: visible;
    content: "123456789"; //enter your new phone number here
}

Alternatively, you can achieve the same result without using CSS by utilizing JavaScript [RECOMMENDED]:

document.getElementById("phone-number").innerHTML = "your_new_phone_number_here";

Tips for modifying text by filtering it and substituting it with alternative content

Answer №1

Answer №2

Similar questions

The Syntax of 2D Transformations

Eliminating unnecessary whitespace between the bottom of the document and an element

Retrieving the information verified in the database

Unable to swap out image when hovered over

Expanding a div to occupy 100% width within a Material UI TableBody

How to Remove a CSS Class from an <li> Tag in ASP.net Using Code Behind

Switch out 2 Bootstrap columns for 2 concealed columns with just a click. Utilizing Rails 4 and Bootstrap

Guide on toggling the button by clicking on the icon to turn it on or off

Aligning SVG shapes within each other

Showcasing Information Using AngularJS from a Json Array

Using jQuery to Generate an Automatically Updating Timer for Slideshow - Pausing on Mouse Click

The error alert must be displayed directly beneath the specific box

Determine the total quantity of colored cells within a row of an HTML table and display the count in its own

The navigation bar and footer are not utilizing the entire width of the browser

Experimenting with creating collapsible panels using Bootstrap/CSS can result in various outcomes

What steps can be taken to create a seamless navigation experience that effectively emphasizes the user's current location?

Optimize HTML outputs in Smarty by reducing the file size

Is it possible to create HTML content directly from a pre-rendered canvas element or input component like a textbox?

CSS - maximize the contrast between background and foreground colors in order to enhance

I cannot seem to receive the confirmation of success!