How to format text wrapped inside specific symbols within a html structure and format it


Tags: javascript,html,css,dom,word

Problem :

I want to add an external script to a website so I can format how certain elements looks in order to make my life easier editing the content. I am wondering if there is a way to find a text that is wrapped between a hashtag and two dots within a paragraph and give it a specific format via css. Javascript, Jquery or Css would work, I just dont manage to find a solution yet.

The html structure is like this:

<p class="title">
::before
#home: research paper
</p>

And I would like to make it like this:

<p class="title">
::before
<span>#home:</span> research paper
</p>

Keeping in mind that the values of what's after the hashtags won't be always the same (although it will be always after the hashtag and before the two dots). It would be possible to search for specific words (example: #home: or #house) as I already know which words will be in the website and they wont change.

Could anyone point me in the right direction to do this?

Many thanks!



Solution :

Try

css

.title span {
  /* css */
}

js

$(".title:contains('#home:')")
.html(function(_, text) {
  return text.replace(/(#+.*:)/, "<span>$1</span>" )
});

$(".title:contains('#home:')")
.html(function(_, text) {
    return text.replace(/(#+.*:)/, "<span>$1</span>" )
})
.title span {   
    color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="title">
::before
#home: research paper
</p>


    CSS Howto..

    How to import a css file only for Firefox but not for other browsers?

    How can I flip multiple div at same time?

    css how can i center multiple elements with absolute position

    Is there a plugin for Wordpress that lets me show HTML/JS/CSS examples? [closed]

    How to get my “Register Now!” Link's to line up at the bottom using CSS

    How to factor a color and boder-color into a single CSS style and apply it on other parts of the CSS styles

    How do I get my links to glow on :hover with CSS3? [duplicate]

    How to change the color of a div in css when another one is on focus

    How can I embed a smartphone simulator in html5? [closed]

    How to debug(make page look like in Firefox) CSS in IE? [duplicate]

    In SASS, how to avoid space before interpolation when creating a selector?

    how to vertically center align div elements with contents other than text

    how to change glyph height without changing the font-size?

    How to add Active states and icons in wordpress wp_nav_menu()

    How to exclude some text from browser zoom

    How to set background-size to “cover”, plus a little more in CSS?

    How to blend canvas to background with CSS?

    How do I position the search box to my specs?

    How to force html element click wireup from js in dynamically loaded page

    Textmate newbie question: how to indent CSS

    How can I make this Asp.net button have the same CSS as this

    How can I center a table relative to one column in HTML/CSS?

    How do I stop a CSS layout from distorting when zooming in/out?

    how to remove css property using javascript?

    How to create circle image and text Which are complementary to each other in bootstrap or pure css?

    How to make Google Preview Button display in a CSS pop-up?

    CSS: How do I shrink a div to beyond a font's invisible padding?

    How to set gulp autoprefixer that it will be prefix css when I save my project

    How to change when Jquery edits my CSS upon reaching an anchor point?

    How to change the background color of a line of user input in a textarea?