logo
down
shadow

Consolidate nested, overlapping <strong> and <em> tags


Consolidate nested, overlapping <strong> and <em> tags

Content Index :

Consolidate nested, overlapping <strong> and <em> tags
Tag : javascript , By : Mossy Breen
Date : November 24 2020, 09:00 AM

wish help you to fix your issue Here are two functions for the conversion in either direction.
First the one that converts an HTML string to the content structure you described:
function htmlToContent(html) {
    // The object to fill and return:
    var content = {
        text: '',
        style: []
    };
    // Keep track of recently closed tags (i.e. without text following them as of yet)
    var closedStyles = [];

    // Recursive function
    function parseNode(elem) {
        var style;
        if (elem.nodeType === 3) {
            // This is a text node (no children)
            content.text += elem.nodeValue;
            // Any styles that were closed should be added to the content 
            // style array, as they cannot be "extended" any more
            [].push.apply(content.style, closedStyles);
            closedStyles = [];
        } else {
            // See if we can extend a style that was closed
            if (!closedStyles.some(function (closedStyle, idx) {
                if (closedStyle.type === elem.nodeName) {
                    style = closedStyle;
                    // Style will be extended, so it's no longer closed
                    closedStyles.splice(idx, 1);
                    return true; // exit ".some"
                }
            })) {
                // No style could be extended, so we create a new one
                style = {
                    type: elem.nodeName,
                    start: content.text.length,
                    length: 0
                };
            }
            // Recurse into the child nodes:
            [].forEach.call(elem.childNodes, function(child) {
                parseNode(child);
            });
            // set style length and store it as a closed one
            style.length = content.text.length - style.start;
            closedStyles.push(style);
        }
    }
    // Create a node with this html
    wrapper = document.createElement('p');
    wrapper.innerHTML = html;
    parseNode(wrapper);
    // Flush remaining styles to the result
    closedStyles.pop(); // Discard wrapper
    [].push.apply(content.style, closedStyles);
    return content;
}
function contentToHtml(content) {
    var tags = [];
    // Build list of opening and closing tags with the offset of injection
    content.style.forEach(function (tag) {
        tags.push({
            html: '<' + tag.type + '>',
            offset: tag.start
        }, {
            html: '</' + tag.type + '>',
            offset: tag.start + tag.length
        });
    });
    // Sort this list by decreasing offset:
    tags.sort(function(a, b) {
        return b.offset - a.offset;
    });
    var html = '';
    var text = content.text;
    // Insert opening and closing tags from end to start in text
    tags.forEach(function (tag) {
        // Prefix the html with the open/close tag and the escaped text that follows it
        html = tag.html + textToHtml(text.substr(tag.offset)) + html;
        // Reduce the text to the part that still needs to be processed
        text = text.substr(0, tag.offset);
    });
    // Remaining text:
    html = textToHtml(text) + html;
    // Create a node with this html, in order to get valid html tag sequences
    p = document.createElement('p');
    p.innerHTML = html;
    // p.innerHTML will change here if html was not valid.
    return p.innerHTML;
}
function textToHtml(text) {
    // See http://www.w3.org/International/questions/qa-escapes#use
    return text.replace('&', '&amp;').replace('<', '&lt;').replace('>', '&gt;');
}

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

Help write regex that will surround certain text with <strong> tags, only if the <strong> tag isn't present


Tag : javascript , By : msg
Date : March 29 2020, 07:55 AM
this one helps. If AD: is always at the start of a line then the following regex should work, using the m switch:
.replace(/^AD:/gm, "<strong>AD:</strong>");
.replace(/<(p|br)>AD:/gm, "<$1><strong>AD:</strong>");

Firebug: nested <strong> tags


Tag : html , By : scott.sizemore
Date : March 29 2020, 07:55 AM
To fix the issue you can do You most likely have invalid markup which may include extraneous opening tags or extraneous closing tags. Pay attention to inline elements that may contain block levels, which isn't allowed.
I would validate your HTML because the width attribute is an indication that the markup isn't the best it could be.

tags$strong in titlePanel renders as string <strong> in HTML title


Tag : r , By : Harvey
Date : March 29 2020, 07:55 AM
To fix the issue you can do According to the spec a title element most only contain text, it should not contain other HTML elements. This is why you see the literal text "strong" on the tabs and such
The titlePanel() function actually does two things. It 1) creates an

element with the contents of your title and 2) adds a tag in the <head>. It's fine for the <h2> element to have a <strong> child, so you really only need to change what's being sent to the <title> tag. It just so happens that titlePanel() actually has two parameters so you can specify them independently. Just change your code to<pre class="prettyprint" class="prettyprint" ><code>titlePanel(tags$strong("My App Title"), "My App Title") </code></pre> </div> </div> </div> </td> </tr> <td style='padding-top:5px;overflow: hidden;word-wrap: break-word;max-width: 590px; width: 590px;' align=left valign=middle> <div id="Replace_all_HTML_tags_except_for_<strong>,_</strong>,_<b>_and_</b>" dir=ltr ><h2> Replace all HTML tags except for <strong>, </strong>, <b> and </b></h2></div><hr width=100% size=2 color=BEBEBE> <div style="COLOR: #636363;FONT-SIZE:9pt;display:inline-block;float:left;padding-left:10px;"><b>Tag : </b><a class="country11" href="/category/javascript/1">javascript</a> , <b>By : </b>user158193 </div> <div style="COLOR: #636363;FONT-SIZE:9pt;display:inline-block;float:right;padding-right:10px;"><b>Date :</b> March 29 2020, 07:55 AM </div> <div dir=ltr style='display: inline-block;'> <div > <div style="padding-top:20px;width:550px;;overflow-x: scroll;overflow-y: hidden;;word-wrap: break-word;display: inline-block;" >hop of those help? In JavaScript I use this regex to remove all HTML tags from a text string: , Just use a negative lookahead assertion.<pre class="prettyprint" class="prettyprint" class="snippet-code-js lang-js prettyprint-override"><code>var s = '<strong> </strong>\n<b> </b> <h1> <h2> <a href="foo.com">'; alert(s.replace(/<(?!\/?b>|\/?strong>)[^>]+>/g, ''));</code></pre> </div> </div> </div> </td> </tr> <td style='padding-top:5px;overflow: hidden;word-wrap: break-word;max-width: 590px; width: 590px;' align=left valign=middle> <div id="Python_Lxml_find_text_after_<strong></strong>_tags" dir=ltr ><h2> Python Lxml find text after <strong></strong> tags</h2></div><hr width=100% size=2 color=BEBEBE> <div style="COLOR: #636363;FONT-SIZE:9pt;display:inline-block;float:left;padding-left:10px;"><b>Tag : </b><a class="country11" href="/category/python/1">python</a> , <b>By : </b>Neuromaster </div> <div style="COLOR: #636363;FONT-SIZE:9pt;display:inline-block;float:right;padding-right:10px;"><b>Date :</b> March 29 2020, 07:55 AM </div> <div dir=ltr style='display: inline-block;'> <div > <div style="padding-top:20px;width:550px;;overflow-x: scroll;overflow-y: hidden;;word-wrap: break-word;display: inline-block;" >hop of those help? You need to get the strong tag element, and then use element.tail to get the text after it. Example -<pre class="prettyprint" class="prettyprint" ><code>In [12]: from lxml import html In [13]: tree = html.fromstring("<strong>text1</strong>: text2 ") In [14]: x = tree.xpath('//strong[text()="text1"]') In [15]: for i in x: ....: print(i.tail) ....: : text2 </code></pre><pre class="prettyprint" class="prettyprint" ><code>In [16]: from lxml import etree In [18]: tree = etree.fromstring("<elem><strong>text1</strong>: text2</elem>") In [19]: x = tree.xpath('//strong[text()="text1"]') In [20]: for i in x: ....: print(i.tail) ....: : text2 </code></pre><pre class="prettyprint" class="prettyprint" ><code>In [21]: x = tree.xpath('//strong[text()="text1"]') In [23]: for i in x: ....: print('text :',i.text) ....: print('tail :',i.tail) ....: text : text1 tail : : text2 </code></pre> </div> </div> </div> </td> </tr> </table> </td></tr> </table> </TD> <td align="left" bgcolor="#FFFFFF" height="100%" valign=top style="width:300px" > <div style="width:300px;; display: table;float:left"> <img alt="Related Posts" style="width:25px;vertical-align:top;" src="/images/cat.png" border="0" > <b>Related QUESTIONS :</b> <div style="text-align:left;width:300px;display:inline-block;word-wrap: break-word;"> <div dir=ltr style='font-size:7pt;margin-left:20px;'> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537413/unable-to-set-property-of-individual-object">Unable to set property of individual object</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537412/why-named-function-expression-itself-cannot-assign-name-to-another-value">Why Named Function Expression itself cannot assign Name to another Value?</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537411/how-to-reset-scroll-position-on-single-page-pagination">How to reset scroll position on single page pagination</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537406/how-to-scroll-to-bottom-of-page-when-a-new-message-is-sent-socket-io">How to scroll to bottom of page, when a new message is sent - Socket.io</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537398/how-to-reconstruct-audio-blob-from-a-base-encoded-string">How to reconstruct audio blob from a base64 encoded String?</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537393/how-to-calculate-numbers-within-an-array-of-objects">How to calculate numbers within an array of objects</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537390/using-javascript-to-change-css-properties-of-svg-circles-for-all-circles-that-was-not-clicked">Using JavaScript to change CSS properties of SVG circles for all circles that was not clicked</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537379/is-there-value-in-proptypeing-repeat-required-properties-at-every-level-of-nested-components">Is there value in propTypeing repeat required properties at every level of nested components?</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537373/call-function-if-variable-does-not-exist-in-a-filter">Call function if variable does not exist in a filter</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537356/localstorage-value-doesn-t-get-updated-automatically">localStorage value doesn't get updated automatically</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537347/react-not-updating-state-with-setstate-correctly-inside-promises">React not updating state with setState correctly inside promises</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537346/direct-native-javascript-or-jquery-method-to-get-containing-block-of-an-element">Direct native JavaScript or jQuery method to get containing block of an element</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537340/dynamic-json-object-to-html-table">Dynamic JSON object to Html Table</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537337/how-to-send-id-and-file-to-same-controller">How to send Id and file to same controller?</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537327/how-to-make-a-jquery-table-cell-td-clickable-to-run-a-function">How to Make a jQuery Table Cell(td) clickable to Run a Function?</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537324/prevent-the-duplicate-function-onchange-event-jquery">Prevent the duplicate function onchange event jQuery</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537307/reactjs-input-upload-doesn-t-return-local-url">Reactjs Input Upload doesn't return local URL</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537305/an-unexpected-startobject-node-was-found-when-reading-from-the-json-reader-a-primitivevalue-node-was-expected">An unexpected 'StartObject' node was found when reading from the JSON reader. A 'PrimitiveValue' node was expected</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537303/how-to-filter-a-json-array-with-an-eventlistener-input-value-at-keyup">How to filter a JSON Array, with an eventListener input value at keyup</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537298/how-to-separate-the-different-properties-of-filter-in-css">How to separate the different properties of filter in css?</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537288/why-dont-work-change-event-of-bootstrap-input-spinner">Why dont work change event of bootstrap input spinner?</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537271/how-to-hide-overflow-text-content-in-react">How to hide overflow text content in react</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537253/is-there-another-way-to-write-line">Is there another way to write line 6</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537252/cypress-how-to-find-by-text-content">Cypress - how to find by text content?</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537245/how-to-setstate-for-the-dynamic-checkboxes-in-a-loop-in-react">How to setstate for the dynamic checkboxes in a loop in react?</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537240/is-display-none-safe">Is display:none safe?</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537229/how-to-create-a-form-to-change-part-of-a-href-url-of-a-button">How to create a form to change part of a href url of a button?</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537216/put-many-function-inside-function-in-javascript">Put many function inside function in Javascript</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537204/how-to-exit-from-loop-after-a-ajax-call">how to exit from loop after a ajax call</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537171/do-angular-reactive-form-validator-min-max-check-perform-type-conversions-before-checking-the-value">Do Angular Reactive Form Validator.min/max check Perform Type Conversions before checking the value?</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537169/how-to-replace-text-within-script-tags-using-jquery">How to Replace Text Within Script Tags Using JQuery</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537149/add-variable-to-object-if-not-undefined-using-short-hand">add variable to object if not undefined using short-hand</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537146/how-can-i-effectively-curve-my-items-inside-a-list">How can I effectively curve my items inside a list?</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537140/add-new-record-keyboard-shortcut-on-kendo-grid-mvc">Add new record Keyboard Shortcut on Kendo Grid Mvc</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537132/time-and-date-running-on-page">Time and Date running on page</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537130/looping-through-page-links-puppeteer-doesn-t-return-values-from-the-newly-loaded-page">Looping through page links puppeteer doesn't return values from the newly loaded page</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537128/problem-with-navigator-geolocation-getcurrentposition-not-working">Problem with Navigator.geoLocation.getCurrentPosition not working</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537127/trying-to-change-the-id-of-an-element-with-javascript">Trying to change the id of an element with Javascript</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537118/embedded-schema-inserting-blank-in-meteor-using-collection">Embedded Schema Inserting Blank in Meteor using Collection2</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537107/avoid-useeffect-to-render-at-first-load">avoid useEffect to render at first load?</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537104/why-is-this-css-transition-only-working-correctly-on-the-some-clicks-how-to-solve-it">Why is this CSS transition only working correctly on the some clicks? How to solve it?</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537096/interpolated-values-does-not-reflect-the-latest-values-in-an-angular-app">Interpolated values does not reflect the latest values in an Angular app</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537094/javascript-classes-define-attribute-in-constructor-or-outside-the-class">Javascript classes define attribute in constructor or outside the class</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537080/how-to-block-scroll-event-passing-through-to-iframe-until-iframe-is-active">How to block scroll event passing through to iframe until iframe is active?</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537078/what-is-the-purpose-of-quot-constructor-quot-method-in-javascript">What is the purpose of "constructor" method in javascript?</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537047/stencil-js-not-working-with-non-default-imports">Stencil JS not working with non-default imports</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537043/are-frameworks-misleadingly-named-for-marketing-purposes">Are frameworks misleadingly named for marketing purposes?</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537039/react-lt-redirect-gt-after-transition-not-working">React <Redirect> after transition not working</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537036/how-to-send-multiple-parameters-in-a-function-using-ejs">How to send multiple parameters in a function using EJS</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537026/react-conditional-style-on-custom-click">React conditional style on custom click</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537023/push-a-block-of-information-to-an-array-x-times-based-on-an-external-variable">Push a block of information to an array X times based on an external variable</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537016/how-do-i-populate-dropdown-with-names-and-values-numeric-ids">How do I populate dropdown with names, and values (numeric ids)?</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9537002/how-to-apply-styling-to-elements-created-with-insertadjacenthtml-method">How to apply styling to elements created with .insertAdjacentHtml method</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9536997/positioning-key-value-of-an-object">Positioning key:value of an object</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9536990/referencing-dom-elements-with-react-hooks">Referencing DOM Elements with React Hooks</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9536977/typeerror-method-quot-getrange-quot-of-null-when-using-multiple-scripts-libraries-in-google-scripts">TypeError: Method "getRange" of null when using multiple scripts (Libraries) in Google scripts</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9536974/why-can-t-i-check-if-an-environment-variable-is-undefined">Why can't I check if an environment variable is undefined?</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9536970/is-there-a-way-to-find-what-parts-are-the-same-between-two-strings">Is there a way to find what parts are the same between two strings?</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9536964/every-change-done-with-magicscroll-and-greensock-get-reset-when-i-hit-the-bottom-of-the-page">Every change done with magicscroll and greensock get reset when I hit the bottom of the page</a></li> <li style="padding-top:5px;"><a style="font-size:9pt;font-weight:bold;" href="/9536962/fix-a-cannot-read-property-handleclick-of-undefined-error-and-issues-related-to-deleting-an-item-from-the-dom">Fix a 'Cannot read property handleClick of undefined error' (and issues related to deleting an item from the DOM)</a></li> </div> </div> </div> </td> </TR> </table></div> <script>prettyPrint();</script> <table bgcolor=ffffff width=100% cellpadding=0 cellspacing=0 border=0><tr><td align=center width=100% height=25 ><img alt="shadow" width="98%" src="/images/bg-categories2.png"></td></tr></table> <TABLE style="border-top:4px solid #518787;" class="cw" dir=ltr bgcolor=A9F5F5 height=55 width=100% BORDER=0 CELLPADDING=0 CELLSPACING=0 > <TR> <TD WIDTH=50% HEIGHT=30 align=center valign=middle> <A href="/privacy-policy.php">Privacy Policy</A> - <A href="/terms.php">Terms</A> - <A href="/contact.php">Contact Us</b></A> </td> <td align=center> © <a href="https://scrbit.com/" target=_blank>scrbit.com</a> </td></tr> </TABLE> </body> </body> </HTML>