What is the best way to delete an HTML element without affecting the text inside the input value?

Is it possible to remove HTML tags from an input field's value attribute?

The input element is being dynamically generated by the CMS of the hosting platform, so the only way to remove the bold tags would be through executing a script.

<span id="kkkje30">
<input type="text" id="siF14" class="manFlPassw" value="<b>generated text</b>" maxlength="15">
</span>

Answer №1

To eliminate tags from an input value, you can utilize regex in the following manner:

$(document).ready(function(){
  $('input').each(function(index, item){
    var regex = /(<([^>]+)>)/ig;
    var value = $(item).val();
    var removedTag = value.replace(regex, '');
    $(this).val(removedTag);
  });
})

Here is a demonstration:

$(document).ready(function(){
  $('input').each(function(index, item){
    var regex = /(<([^>]+)>)/ig;
    var value = $(item).val();
    var removedTag = value.replace(regex, '');
    $(this).val(removedTag);
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="kkkje30">
<input type="text" id="siF14" class="manFlPassw" value="<b>generated text</b>" maxlength="15">
</span>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for saving multipart/form-data using ajax in Laravel 5.6

Looking for help to submit a multipart/form-data form through ajax. I've tried various solutions found online, but none seem to work for me. Hopefully, someone can point out what I might be missing! This is the HTML code of my form. It's being r ...

The dropdown menu is getting hidden behind the parent div due to overflow issues, even with z-index not resolving

Hey everyone, I'm having trouble with the overflow breaking the code I've noticed that the code works fine under two conditions: a) if I remove the overflow-x and overflow-y from .bs-exmple or b) if I remove the ul and li elements However, I ne ...

What is the process for incorporating themes into CSS?

At the moment, I have set up variables to manage colors for both light and dark themes (such as --light-background-color, --dark-background-color). Handling two themes is manageable with this approach, but it feels a bit labor-intensive. If more themes wer ...

How would you utilize jQuery to access the "option" array of a select control with the attribute of multiple=true by utilizing the find() method?

When using jquery, I am attempting to access selected items from a select control that has multiple=true. My goal is to reference them by name criteria and then iterate through the list. Below is my current code snippet: var currentRow = $(this); // sele ...

Learn the process of incorporating animations into text with Material UI

I'm looking to incorporate a 3D animation effect with a 360-degree rotation on some text using Material UI. <Typography variant="overline" color="secondary" style={{fontFamily:'Roboto'}}> All about your needs </Typography> Ho ...

Div Randomly Transforms Its Vertical Position

After successfully creating a VS Code Extension for code completion, I decided to develop a website as a landing page where users can sign up and customize their extension settings. The editor I built pops up first on the page seemed to be working fine in ...

Tips for retrieving user input and displaying it on an HTML page

I have encountered an issue with displaying user input in a table. The code for the table display is as follows: <tr ng-repeat="user in users" ng-class-even="'bg-light-grey'" ng-if="isLoading==false"> <td> ...

Error encountered when using Symfony 2 command line interface

Just started learning Symfony2 and encountered a problem. I made changes to my CSS and when I try to re-install them in Eclipse shell, I get this error message: 'C:\wamp\www\Symfony' is not recognized as an internal or external ...

What measures can be taken to avoid the wrapping of cell table data in this particular scenario?

In this captured image : The HTML code below displays a table with various elements including an image, input fields, and dropdown menus. <div align="center"> <table cellpadding='1' cellspacing='1' width='98%' class ...

Manipulating HTML elements while inside an SVG tag: a comprehensive guide

Having limited experience with .svg files and tags, I'm trying to achieve something simple but have been unable to find the exact solution after spending hours searching online. Can anyone provide some assistance? I have a basic svg file with an imag ...

RAZOR - Strip image elements from variable with HTML content

In the code snippet below, I am using a helper to display content: @Html.Raw(Model.PageData.PageContent) My goal is to filter out any image tags that may be present. I have explored methods like .substring(), but they require specific indices or string n ...

Implement a feature in Bootstrap Vue Timepicker that automatically resets the minutes to 00 whenever the user selects the hours

When a user opens the timepicker, both hours and minutes will be blank. When they choose the hours, the minutes should automatically be set to 00. Thank you for your help. <b-form-timepicker v-model="meditation.start.time" ...

Showing a picture in Angular from a stored image on a node.js server

I'm curious about security measures. Let's say I've uploaded an image of an animal to the server, such as 1545419953137bear.jpg, which is stored in my backend uploads folder along with other images. On the frontend, I use an img element wit ...

What is the best way to configure a CakePHP method to generate standard HTML output when the controller is set to default JSON?

Currently, I am working on developing an Android application and utilizing CakePHP on the server side. I have a UsersController that provides JSON data for functionalities like login, registration, etc, except for account activation. As account activatio ...

Alt and title attributes for images are getting mixed up when there is a space in between

Every time I include a space in the alt tag of my image, it completely distorts the entire <img> line. For example, if my image title is Windows 10, specifically related to today's news. Let's assume my image tag reads Windows 10 officiall ...

Switching on the click functionality

I was able to successfully toggle a boolean variable along with some other options. However, I encountered an issue when trying to create another click function for a different button to set the boolean variable to false. Here is my code: let manageme ...

Designing with Bootstrap 4 involves incorporating a button that uses the data-toggle attribute set to "collapse" along with an href anchor linked to

I have attempted to link to an ID while also triggering a data-toggle collapse: <a href="#id" data-toggle="collapse" data-target="#collapseTwo" class="btn btn-primary" title="Something cool">Something very cool</a> for linking to this specif ...

Steps for transforming a matplotlib animation into an HTML5 `<video>` element

Here is the code for a matplotlib animation graph and you can find instructions on how to save it here. from IPython.display import HTML import matplotlib.pyplot as plt import matplotlib.animation import numpy as np t = np.linspace(0,2*np.pi) x = np.sin ...

Optimal selection of selectors for every type of button in an HTML document

In my current setup, I am utilizing the following selectors: input[type="button"], input[type="submit"], input[type="reset"], button Do you think this is a comprehensive selection of selectors to cover all potential buttons on a website? ...

Adjust the size of the image file for uploading

I am attempting to restrict the file upload size to 1MB by using this jQuery code snippet : <td><label> Upload image </label> <input type="file" class="upload" name="image" value="<?php echo set_value('image'); ?>" ...